<template>
    <div class="app">
        <!-- 侧边栏 -->
        <Head @changeA='changeA'></Head>
        <!-- 内容 -->
        <Main :active='active'></Main>
    </div>
</template>

<script>
import Head from './Head';
import Main from './Main';
export default {
  components:{Head,Main},
  methods: {
    changeA(index){
      this.active=index;
    }
  },
  data(){
    return {
      active:0,
    }
  }
}
</script>

<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
i{font-style: normal;}
.app{
    width: 100%;
    height: 694px;
    background: #f2f2f2;
    display: flex;
    justify-content: space-between;
}
.head{
  width: 12%;
  height: 100%;
}
.main{
  width: 86%;
  height: 100%;
}

</style>